<template>
  <div style="">
    <div class="buy_box">
      <div class="content" style="">
        <div
          style="
            display: flex;

            /* justify-content: space-between; */
            padding: 15px 20px;
            border-bottom: 1px solid #eee;
            background: white;
            color: black;
          "
        >
          <div style="width: 30%"> 名称 </div>
          <div style="width: 30%"> 状态 </div>
          <div style="width: 30%"> 倍率 </div>
          <div style="width: 30%"> 标签 </div>
        </div>
        <div class="ccc" v-for="item in 10" :key="item">
          <div style="width: 30%"> 日本JP-T-GPT </div>
          <div style="width: 30%">
            <div
              style="
                width: 10px;
                height: 10px;
                border: 1px solid red;
                border-radius: 50%;
                background-color: red;
              "
            ></div>
          </div>
          <div style="width: 30%">
            <span style="padding: 5px 20px; border-radius: 8px; background: #eee; font-size: 10px"
              >1 x</span
            >
          </div>
          <div style="width: 30%">
            <span
              v-for="item in 3"
              :key="item"
              style="
                margin-left: 5px;
                padding: 5px 20px;
                border-radius: 8px;
                background: #eee;
                font-size: 10px;
              "
              >Trojan</span
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup></script>
<style scoped>
  .buy_box {
    display: flex;
    flex-direction: column;
    height: 460px;
    margin-top: 20px;
    border: 1px solid #eee;

    /* padding: 10px; */

    /* background-color: white; */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
      'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
      'Segoe UI Emoji', 'Segoe UI Symbol';
  }

  .content {
    border: 1px solid #eee;
  }

  .buy_box .header {
    display: flex;
    align-items: center;

    /* padding: 10px; */
    height: 50px;
    background-color: #fafafa;
  }

  .ccc {
    display: flex;
    justify-content: space-between;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    background-color: white;
    color: #6c757d !important;
  }

  .ccc:hover {
    background: #f1f1f1;
  }
</style>
